<template>
  <div>
    <a-result>
      <template #icon>
        <a-space v-if="outcome!==''" direction="vertical">
          <a-alert :message="outcome" :type="outcome==='Success'?'success':'warning'" show-icon/>
          <img v-if="resultPicture!==''" :src="resultPicture"/>
          <a-button v-if="outcome==='Success'" type="primary" @click="download">保存详细结果</a-button>
        </a-space>
        <a-icon v-else style="color: #1890FF" type="search"/>
      </template>
      <template #title>
        <a-input v-model="fileId" placeholder="输入任务ID" style="width: 25%"/>
      </template>
      <template #extra>
        <a-button type="primary" @click="submit">
          查询
        </a-button>
      </template>
    </a-result>
  </div>
</template>

<script>
export default {
  name: "Query",
  data() {
    return {
      fileId: "", //文件编号
      outcome: "", //结果文本
      resultPicture: "", //结果图片URL
    };
  },
  methods: {
    async submit() {
      let res = await fetch("/query?filename=" + this.fileId)
      let json = await res.json()
      this.outcome = json.payload

      //如果结果为成功则显示图片
      if (this.outcome === "Success") {
        this.resultPicture = "/output/" + this.fileId + ".png"
      } else {
        this.resultPicture = ""
      }

    },
    download(){
      window.open("/output/" + this.fileId + ".xls")
    }
  },
};
</script>
